<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      ul {
        width: 500px;
        border: 10px red solid;
        /* 设置ul为弹性容器 */
        display: flex;

        flex-direction: column;

        /* 
            flex-wrap:
                设置弹性元素是否在弹性容器中自动换行。
                可选值:
                    nowrap 默认值,元素不会自动换行
                    wrap 元素沿着辅轴方向自动换行
                    wrap-reverse 元素沿着主轴反方向换行
            
            flex-flow: wrap 和 direction的简写属性
        */
        /* flex-flow: row wrap; */
        /* flex-wrap: wrap; */
        /* 
            justify-content
                - 如何分配主轴上的空白空间(主轴上的元素如何排列)
                - 可选值:
                    flex-start 元素沿着主轴起边排列
                    flex-end 元素沿着主轴的终边排列
                    center 元素居中排列
                    space-around 空白分布到元素的两侧
                    space-between 空白均匀分布到元素间
                    space-evenly 空白分布到元素的单侧
        */
        justify-content: flex-start;

      }

      li {
        width: 200px;
        height: 100px;
        background-color: #bfa;
        font-size: 50px;
        text-align: center;
        line-height: 100px;

        flex-shrink: 0;
      }

      li:nth-child(1) {
        background-color: #bfa;
      }

      li:nth-child(2) {
        background-color: pink;
      }

      li:nth-child(3) {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>
